import React from 'react';
import { Tooltip, Table, Divider, Button, Modal, Popconfirm, Card } from 'antd';
import {
  FormOutlined,
  PlusOutlined,
  PlusSquareOutlined,
  DeleteOutlined,
  SyncOutlined,
} from '@ant-design/icons';
import { connect } from 'umi';
import CateEdit from './cateedit';

class ViewForm extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      visible: false,
      dataSourceTags: [],
      dataSource: [],
      dataSourceProduct: [],
      cateid: 0,
      parentCate: {},
      ids: [],
    };
  }
  componentDidMount() {
    this.fetchData();
  }
  fetchData = () => {
    this.setState({ loading: true });
    this.props
      .dispatch({
        type: 'Abp/getTreeList',
        payload: { layout: this.props.layout },
        control: 'Category',
      })
      .then(() => {
        const resp = this.props.response.result;
        console.log(this.props.response.result);

        const courseTags: any = [];
        const classification: any = [];
        const product: any = [];
        resp.forEach((item: any) => {
          if (item.layout === 'courseTags') {
            courseTags.push(item);
          } else if (item.layout === 'product') {
            product.push(item);
          } else {
            classification.push(item);
          }
        });

        this.setState({
          loading: false,
          dataSource: classification,
          dataSourceTags: courseTags,
          dataSourceProduct: product,
        });
      });
  };
  showModal = (val: any) => {
    this.setState({
      visible: val,
    });
  };
  editCate(cid: any) {
    var _this = this;
    this.setState(
      {
        cateid: cid,
        parentCate: {},
      },
      function () {
        _this.showModal(true);
      },
    );
  }
  addSubCate(pid: any) {
    var _this = this;
    this.setState(
      {
        cateid: 0,
        parentCate: pid,
      },
      function () {
        _this.showModal(true);
      },
    );
  }
  addCate(pid: any) {
    var _this = this;
    this.setState(
      {
        cateid: 0,
        parentCate: {},
      },
      function () {
        _this.showModal(true);
      },
    );
  }
  handleDelete(val: any) {
    this.setState({ loading: true });
    this.props
      .dispatch({
        type: 'Abp/delete',
        payload: { id: val },
        control: 'Category',
      })
      .then(() => {
        this.setState({
          loading: false,
        });
        this.fetchData();
      });
  }
  render() {
    const columns = [
      {
        title: '信息类别',
        dataIndex: 'categoryName',
      },
      {
        title: '索引',
        dataIndex: 'categoryIndex',
      },
      {
        title: '排序号',
        dataIndex: 'no',
      },
      {
        title: '操作',
        key: 'action',
        render: (text: any, record: any) =>
          this.state.dataSource.length >= 1 ||
          this.state.dataSourceTags.length >= 1 ||
          this.state.dataSourceProduct.length >= 1 ? (
            <span>
              <Tooltip placement="left" title="编辑">
                <a onClick={() => this.editCate(record.id)}>
                  <FormOutlined />
                </a>
              </Tooltip>
              <Divider type="vertical" />
              <Tooltip placement="bottom" title="添加子类">
                <a onClick={() => this.addSubCate(record)}>
                  <PlusSquareOutlined />
                </a>
              </Tooltip>
              <Divider type="vertical" />
              <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
                <Tooltip placement="bottom" title="删除类别">
                  <a>
                    <DeleteOutlined style={{ color: 'red' }} />
                  </a>
                </Tooltip>
              </Popconfirm>
            </span>
          ) : null,
      },
    ];
    const rowSelection = {
      onChange: (selectedRowKeys: any, selectedRows: any) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      getCheckboxProps: (record: any) => ({
        name: record.name,
      }),
    };
    return (
      <div>
        <Card
          size={this.props.size}
          extra={
            <span>
              <Tooltip title="新增">
                <Button type="link" onClick={() => this.addCate(0)} icon={<PlusOutlined />}>
                  新增
                </Button>
              </Tooltip>
              <Tooltip title="刷新">
                <Button type="link" onClick={() => this.fetchData()} icon={<SyncOutlined />}>
                  刷新
                </Button>
              </Tooltip>
            </span>
          }
        >
          <Table
            rowKey={(record) => record.id}
            columns={columns}
            dataSource={
              // this.props.layout == 'course' ? this.state.dataSource : this.state.dataSourceTags
              this.props.layout == 'course'
                ? this.state.dataSource
                : this.props.layout == 'product'
                ? this.state.dataSourceProduct
                : this.state.dataSourceTags
            }
            loading={this.state.loading}
            pagination={false}
            size={this.props.size}
            rowSelection={rowSelection}
          />

          <Modal
            title="分类编辑"
            visible={this.state.visible}
            onCancel={() => this.showModal(false)}
            footer={null}
            destroyOnClose
          >
            <CateEdit
              RefreshData={() => this.fetchData()}
              cateid={this.state.cateid}
              parentCate={this.state.parentCate}
              layout={this.props.layout}
            />
          </Modal>
        </Card>
      </div>
    );
  }
}
export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(ViewForm);
